<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">收件人</view>
				<view class="input"><input placeholder="请输入收件人姓名" type="text" v-model="name" /></view>
			</view>
			<view class="row">
				<view class="nominal">电话号码</view>
				<view class="input"><input placeholder="请输入收件人电话号码" type="text" v-model="tel" /></view>
			</view>
			<view class="row">
				<view class="nominal">所在地区</view>
				<view class="input" @tap="chooseCity">{{ region.label }}</view>
			</view>
			<view class="row">
				<view class="nominal">详细地址</view>
				<view class="input"><textarea v-model="detailed" style="font-size: 28upx;" auto-height="true" placeholder="输入详细地址"></textarea></view>
			</view>
			<view class="row">
				<view class="nominal" style="color: #999;">设置默认</view>
				<view class="input switch"><switch color="#F23A3A" style="transform:scale(0.8)" :checked="isDefault" @change="isDefaultChange" /></view>
			</view>
			<view class="del_box" v-if="editType == 'edit'" style="border: none;" @tap="del"><view class="del">删除收货地址</view></view>
		</view>
		<view class="save" @tap="save"><view class="btn" :style="{background:newColor.color}">保存地址</view></view>
		<lb-picker :confirm-color="newColor.color" empty-text="暂无数据" radius="10px" mode="multiSelector" :level="3" @confirm="setCity" :list="areaList" ref="picker" style="border-bottom: none;"></lb-picker>
	</view>
</template>

<script>
import LbPicker from '@/components/lb-picker/index.vue';
export default {
	components: {
		LbPicker
	},
	data() {
		return {
			editType: 'edit',
			id: '',
			name: '',
			tel: '',
			detailed: '',
			isDefault: false,
			cityPickerValue: [0, 0, 1],
			themeColor: '#007AFF',
			region: { label: '请点击选择地址', value: [], cityCode: '' },
			areaList:[]
		};
	},
	methods: {
		onCancel(e) {
			console.log(e);
		},
		chooseCity() {
			this.$refs.picker.show();
		},
		isDefaultChange(e) {
			this.isDefault = e.detail.value;
		},
		setCity(){
			
		},
		del() {
			uni.showModal({
				title: '删除提示',
				content: '你将删除这个收货地址',
				confirmColor:'#F23A3A',
				cancelColor:'#999999',
				success: res => {
					if (res.confirm) {
						uni.setStorage({
							key: 'delAddress',
							data: { id: this.id },
							success() {
								this.$Router.back(1);
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		save() {
			let data = { name: this.name, head: this.name.substr(0, 1), tel: this.tel, address: { region: this.region, detailed: this.detailed }, isDefault: this.isDefault };
			if (this.editType == 'edit') {
				data.id = this.id;
			}
			if (!data.name) {
				uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
				return;
			}
			if (!data.tel) {
				uni.showToast({ title: '请输入收件人电话号码', icon: 'none' });
				return;
			}
			if (!data.address.detailed) {
				uni.showToast({ title: '请输入收件人详细地址', icon: 'none' });
				return;
			}
			if (data.address.region.value.length == 0) {
				uni.showToast({ title: '请选择收件地址', icon: 'none' });
				return;
			}
			uni.showLoading({
				title: '正在提交'
			});
			//实际应用中请提交ajax,模板定时器模拟提交效果
			setTimeout(() => {
				uni.setStorage({
					key: 'saveAddress',
					data: data,
					success() {
						uni.hideLoading();
						this.$Router.back(1);
					}
				});
			}, 300);
		}
	},
	onLoad(e) {
		//获取传递过来的参数
		this.editType = this.$Route.query.type;
		console.log(this.editType)
		if (this.editType == 'edit') {
			uni.getStorage({
				key: 'address',
				success: e => {
					console.log(e)
					this.id = e.data.id;
					this.name = e.data.name;
					this.tel = e.data.tel;
					this.detailed = e.data.address.detailed;
					this.isDefault = e.data.isDefault;
					this.cityPickerValue = e.data.address.region.value;
					this.region = e.data.address.region;
				}
			});
		}
	}
};
</script>
<style lang="scss">
.save {
	view {
		display: flex;
	}
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 120upx;
	display: flex;
	justify-content: center;
	align-items: center;
	.btn {
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 70%;
		height: 80upx;
		border-radius: 80upx;
		background-color: #f23a3a;
		color: #fff;
		justify-content: center;
		align-items: center;
		.icon {
			height: 80upx;
			color: #fff;
			font-size: 30upx;
			justify-content: center;
			align-items: center;
		}
		font-size: 30upx;
	}
}
.content {
	display: flex;
	flex-wrap: wrap;
	view {
		display: flex;
	}
	.row {
		width: 94%;
		margin: 0 3%;
		border-top: solid 1upx #eee;
		.nominal {
			width: 30%;
			height: 80upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			align-items: center;
		}
		.input {
			width: 70%;
			padding: 20upx 0;
			align-items: center;
			font-size: 28upx;
			input {
				font-size: 28upx;
				color: #333333;
			}
			&.switch {
				justify-content: flex-end;
			}
			.textarea {
				margin: 20upx 0;
				min-height: 80upx;
			}
		}
	}
	.del_box{
		width: 100%;
		display: block;
		overflow: hidden;
		margin-right: 30upx;
	}
	.del {
		width: 240upx;
		height: 80upx;
		float: right;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #F23A3A;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 38upx;
		background-color: rgba(255, 0, 0, 0.05);
		border-bottom: solid 1upx #eee;
	}
}
</style>
